<template>
	<view class="cus-tabs d-flex flex-row">
		<view
			class="flex-center item ml-3"
			:class="active == item.value ? 'active' : ''"
			v-for="(item, i) in list"
			:key="i"
			@click="() => clickTab(item)"
		>
			<!-- checkmark -->
			<uv-icon
				class="icon-part"
				name="checkmark"
				color="#2263E1"
				size="16"
			></uv-icon>
			<text>{{ item.label }}</text>
		</view>
		<!-- <view class>
			<text>一般废物</text>
		</view> -->
	</view>
</template>
<script setup>
const active = defineModel({ default: 'DANGER' })
const props = defineProps({
	list: {
		type: Array,
		default: () => [],
	},
	// active: {
	// 	type: String,
	// 	default: 'DANGER',
	// },
})
const emit = defineEmits(['change'])
const clickTab= (item)=> {
  active.value = item.value
  emit('change', active.value)
}
</script>
<style lang="scss" scoped>
.cus-tabs {
	.item {
		border: 1px solid #c5c5c5;
		padding: 10rpx 25rpx;
		font-size: 26rpx;
		border-radius: 6rpx;
		background: #fff;
		color: #333;
		.icon-part {
			display: none;
		}
		&.active {
			border-color: #5294ea;
			background: #f2f8fe;
			.icon-part {
				display: inline-block;
			}
		}
	}
}
</style>
